import React, { Component } from 'react'
import { SearchBar, SideBar, Tag, Tabs } from 'antd-mobile'
import Header from '../../components/Header/Header'
import './cate.less'
import { reqcate, reqcategoods } from '../../request/api'
import { Link } from 'react-router-dom'
import { imgPre } from '../../request/http'
import {connect} from 'react-redux'
import { actions, getcateGoods, getcatelist, getN } from '../../store/mouble/cate'
import { bindActionCreators } from 'redux'
 class Cate extends Component {
  // constructor() {
  //   super()
  //   this.state = {
  //     cates: [],
  //     categoods:[],
  //     n: 1,
  //     names:'时令水果'
  //   }
  // }
  componentDidMount(){
    let {cateFn:{requestCateList,changeN,requestcateGoods}}=this.props
    // 分类侧边
    requestCateList();
    // 分类商品
    changeN()
    // requestcateGoods()
  }
  render() {
   console.log(this.props);
   let {cates,n,categoods,cateFn:{changeN}}=this.props
   console.log(n);
    return (
      <div>
        <Header title={'商品分类'} back></Header>
        {/* {JSON.stringify(n)} */}
        <div className='search'>
          <SearchBar
            placeholder='请输入内容'
            style={{
              '--border-radius': '100px',
              '--background': '#ffffff',
              '--height': '32px',
              '--padding-left': '12px',
            }}
          />
        </div>

        <div className='catelist'>
          <ul>
            {cates.map((item,index) => (
              <li key={item.id} 
              onClick={() => {changeN(item.id,item.catename); }}
              className={item.id == n ? 'active' : ''}
              >{item.catename}</li>
            ))}
          </ul>


        </div>

        {/* 商品 */}
        <div className="goodcate">
           
              {/* <h3>{names}</h3> */}
              {categoods.map(item=>{
                return(
                  <div className='cates' key={item.id}>
                   <img src={imgPre+item.img} alt="" />
                   <ul>
                     <li><h3>{item.goodsname}</h3></li>
                     <li>
                       <span>￥{item.price}<i>￥{item.market_price}</i></span>
                        <Link to={"/"}>加入购物车</Link>
                     </li>
                     <li className='qx'>999人已付款，99.99%的好评</li>
                   </ul>
              </div>
                )
              })}
          
        </div>
      </div>
    )
  }
}
const mapStateToProps=state=>{return{
  cates:getcatelist(state),//分类侧边
  n:getN(state),//n
  categoods:getcateGoods(state)//分类商品
}}
const mapDispatchToProps=dispatch=>{return{
  cateFn:bindActionCreators(actions,dispatch)
}}
export default connect(mapStateToProps,mapDispatchToProps)(Cate)